<template>
	<div class="wrap">
		<div class="big-center">
			<div class="center">
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="top-left">
							<div class="logoname">欢迎进入xx科技</div>
							<div class="logins">
								<span v-if="!userId" @click="goAbute('/login')">请登录</span>
								<span v-if="!userId" class="xian">|</span>
								<span v-if="!userId" @click="goAbute('/login?navgatorIndex=3')">免费注册</span>
								<span v-if="userId" @click="quit()">退出登录</span>
							</div>
						</div>
					</el-col>
					<el-col :span="5"><div class="kong"></div></el-col>
					<el-col :span="11">
						<div class="top-right">
							<span @click="goAbute('/?index=0')">首页</span>
							<span @click="goShoppingCar('/order')">个人中心</span>
							<span>
								<span @click="goAbute('/empty')" class="el-dropdown-link" style="color: #999;">
									客户服务
								</span>
							</span>
							<span >
								<el-dropdown  @command="handleCommand">
									<span class="el-dropdown-link" style="color: #999;">
										网站导航<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<div style="width: 200px;display: inline-block;">
											<el-dropdown-item v-for="(item,index) in list" :key="index" :command="item.url" >{{item.name}}</el-dropdown-item>
										</div>
									</el-dropdown-menu>
								</el-dropdown>
							</span>
							<span >
								<el-dropdown>
									<span class="el-dropdown-link" style="color: #999;">
										手机版<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>
											<img src="../../assets/foot/app.png" />
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</span>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="title" >
			<img src = "../../assets/head/logo.png" alt = "">
			<div class="goHome" @click="tiaozhuan()">返回首页</div>
		</div>
		<div class="line"></div>
		<div class="content" >
			<div class="content-title" >
				<div class="title1" >请扫码进入手机网站进行操作</div>
			</div>
			<div class="imgLsit">
				<img class="empty" src = "../../../static/images/order/1.png" alt = "">
				<!-- <img class="program" src = "../../../static/images/order/2.png" alt = "">
				<img class="app" src = "../../../static/images/order/APP.png" alt = ""> -->
				<img class="program" :src = "QRcode" alt = "">
				<!-- <img class="app" :src = "downcode" alt = ""> -->
			</div>
		</div>
		<!-- 底部 -->
		<Foots></Foots>
	</div>
</template>

<script>
import Foots from '@/components/foots.vue'
export default {
	components: {
		Foots,
	},
	data () {
		return {
			list:[
				{ name:'热卖榜单', url:'/?index=1' },
				{ name:'精选好物', url:'/?index=2' },
				{ name:'每日上线', url:'/?index=3' },
				{ name:'拼团购', url:'/?index=4' },
			],
			downcode: window.localStorage.getItem("downcode"),
			QRcode: window.localStorage.getItem("QRcode"),

		}
	},
	created() {
		this.getdata()
	},
	computed: {
		userId() {
			// return this.$store.state.userId
			return this.$cookie.get('userId')
		},
	},
	methods:{
		goShoppingCar(url) {
			if(this.userId) {
				this.$router.push({
					path: url
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}

		},
		goAbute(url){
			console.log('url',url)
			this.$router.push({
				path: url
			})
		},
		//退出登录
		quit() {
			this.$store.commit('updateUserId','')
			this.$store.commit('updateRelationId','')

			this.$cookie.set('uuid','')
			this.$cookie.set('userId','')
			this.$cookie.set('relationId', '')
			this.$cookie.set('image_url', '')
			this.$cookie.set('nickName', '')
			this.$cookie.set('phone', '')
			this.$router.go(0)
		},
		tiaozhuan(){
			this.$router.push({
			  path: '/'
			})
		},
		handleCommand(command) {
			this.$router.push({
				path: command
			})
		},
		getdata() {
			this.$http({
				url: this.$http.adornUrl('/common/type/286'),	//pc端下线功能描述标题
				method: 'get',
			}).then(({data}) => {
				window.localStorage.setItem("QRcode",data.data.value);
				this.miaoshu1 = data.data.value
			})
			this.$http({
				url: this.$http.adornUrl('/common/type/287'),	//pc端下线功能描述内容
				method: 'get',
			}).then(({data}) => {
				window.localStorage.setItem("QRcode",data.data.value);
				this.miaoshu2 = data.data.value
			})
		}

	}
}
</script>

<style scoped>
	.wrap {
		height: 100vh;
		background: #fff;
	}
	.big-center{
		width: 100%;
		height: 24px;
		line-height: 24px;
		color: #999;
		font-size: 14px;
		background: #E6E6E6;
	}
	.center{
		width: 1200px;
		margin: 0 auto;
	}
	.top-left{
		text-align: left;

	}
	.top-left div{
		display: inline-block;
	}
	.logoname{
		width: 40%;
	}
	.logins{
		width: 50%;
		text-align: center;
	}
	.logins span{
		color: #999;
		text-decoration:none;
	}
	.logins span:hover{
		color: #FF0D18;
		cursor: pointer;
	}
	.xian{
		margin: 0 10px;
	}
	.kong{
		width: 100%;
		height: 24px;
	}
	.top-right{
		text-align: right;
	}
	.top-right span{
		display: inline-block;
		margin-left: 20px;
		color: #999;
		text-decoration:none;
	}
	.top-right span:hover{
		color: #FF0D18;
		cursor: pointer;
	}
	.title {
		width: 1200px;
		display: flex;
		justify-content: space-between;
		margin: 30px auto 30px;
	}
	.title img {
		width: 360px;
		height: 58px;
	}
	.goHome {
		width: 120px;
		height: 44px;
		text-align: center;
		line-height: 44px;
		color: #fff;
		background: #ff2d55;
		border-radius: 0px 2px 2px 0px;
	}
	.line {
		width: 100%;
		height: 4px;
		background: #ff2d55;
	}
	.content {
		width: 1200px;
		margin: 0 auto;
		padding: 40px 0;
	}
	.content-title {
		margin: 30px;
	}
	.title1 {
		font-size: 34px;
		font-weight: 700;
		color: #333333;
	}
	.title2 {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		margin-top: 20px;
	}
	.imgLsit {
		display: flex;
		justify-content: space-between;
	}
	.empty {
		width: 587px;
		height: 445px;
	}
	.program,.app {
		width: 200px;
		height: 200px;
		margin-top: 50px;
	}

</style>
